<template>
  <div class="tool-rectangle" :style="$methods.setStyle(tempStyle)"></div>
</template>

<script>
import mixins from "../mixin";
export default {
	mixins: [mixins],
  data() {
    return {
      key: null,
      attr: {
        borderColor: "#dddddd",
        borderWidth: 1,
        background: "#ffffff",
		borderStyle:'solid'
      },
    };
  },
  computed: {
    tempStyle() {
      return {
        borderColor: this.attr.borderColor,
        borderWidth: this.attr.borderWidth,
        borderStyle: this.attr.borderStyle,
        backgroundColor: this.attr.backgroundColor,
      };
    },
  },
  pageData: {
    name: "tool-rectangle",
    title: "矩形",
    count: 0,
    width: 300,
    height: 150,
    config: {
      label: "矩形",
      data: null,
      attr: [
        {
          key: "borderColor",
          title: "边框颜色",
          formType: "color-picker",
          type: "String",
          data: "#ddd",
          group: "basics",
        },
        {
          key: "backgroundColor",
          title: "背景颜色",
          formType: "color-picker",
          type: "String",
          data: "#fff",
          group: "basics",
        },
        {
          key: "borderWidth",
          title: "边框大小",
          formType: "text-number",
          type: "Number",
          data: 2,
          group: "basics",
        },
        {
          key: "borderStyle",
          title: "边框样式",
          formType: "border-select",
          type: "String",
          data: 'solid',
          group: "basics",
        },
      ],
    },
  },
};
</script>

<style scoped>
.tool-rectangle {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  background-color: #fff;
}
</style>
